<template>
  <div>
    <DialogStyle>
      <el-dialog
        title="新增区域"
        :visible="dialogVisible"
        width="750px"
        :close-on-click-modal="false"
        @close="dialogClose"
      >
        <!-- 表单内容 -->
        <el-form ref="deptRef" :rules="deptRules" :model="formData" label-width="150px" style="padding-left:100px">
          <el-form-item prop="regionName" label="区域名称：">
            <el-input v-model="formData.regionName" placeholder="请输入" style="width:400px" />
          </el-form-item>
          <el-form-item prop="remark" label="区域说明：">
            <el-input
              v-model="formData.remark"
              style="width:400px"
              type="textarea"
              :rows="5"
              placeholder="请输入备注(不超过40字)"
            />
          </el-form-item>
        </el-form>
        <!-- 底部按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button style="margin-right:50px" @click="dialogClose">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </el-dialog>
      <DialogStyle /></dialogstyle></div>
</template>

<script>
import { addBlockApi } from '@/api'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    rowScendList: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      deptRules: {
        regionName: [
          { required: true, message: '请输入', trigger: ['blur', 'change'] },
          { min: 1, max: 15, message: '请输入不超过15个字符', trigger: ['blur', 'change'] }
        ],
        remark: [
          { required: true, message: '请输入', trigger: ['blur'] },
          { min: 1, max: 40, message: '请输入不超过40个字符', trigger: ['blur', 'change'] }
        ]
      },
      formData: {
        regionName: '',
        remark: ''
      }
      // formData: JSON.parse(localStorage.getItem('word')) || {},
    }
  },
  methods: {
    // 关闭弹窗
    dialogClose() {
      this.$emit('closeInsideWord')
      this.$refs.deptRef.resetFields()
    },
    // 新增区域
    async submit() {
      // console.log(this.formData, '878946654')
      this.$refs.deptRef.validate(async valid => {
        if (!valid) return
        try {
          await addBlockApi(this.formData)
          this.$message.success('新增成功')
          this.$emit('fetchListFn')
          this.dialogClose()
        } catch (err) {
          this.$message.warning(`新增失败,${err.response.data}`)
        // console.dir(err)
        }
      })
    }
  }
}
</script>

<style>
.dialog-footer{
  margin-right: 250px;
}
</style>
